<template>
  <div class="personnel-list">
    <div class="personnel-list-header">
      <div class="personnel-list-from">
        <DynamicForm
          ref="dynamicFormRef"
          :rulesForm="personnelSearchForms"
          type="search"
          @click="callBack"
        />
      </div>
      <div class="personnel-list-button">
        <el-button
          type="primary"
          @click="
            () => {
              toAddRoute('/personnel/add-personnel', null);
            }
          "
          >新增
        </el-button>
      </div>
    </div>
    <div class="personnel-list-table">
      <DynamicTable
        ref="dynamicTableRef"
        @click="callBack"
        :columns="state.personnelColumns"
        :data="state.data"
        :table="state.table"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";

import DynamicTable from "@/components/layout/table/dynamic-table.vue";
import DynamicForm from "@/components/layout/form/dynamic-form.vue";

import { personnelColumns } from "@/assets/script/monitor/columns/personnel";
import { personnelSearchForms } from "@/assets/script/monitor/forms/personnel/personnel-form";
import { listPersonnelPageApi } from "@/api/personnel";

const dynamicTableRef = ref(DynamicTable);
const dynamicFormRef = ref(DynamicForm);

const router = useRouter();

const state = reactive({
  personnelColumns: personnelColumns,
  data: [] as any,
  table: {
    total: 0,
    pageIndex: 1,
    pageSize: 15,
  },
  searchData: {} as any,
});

onMounted(() => {
  listPersonnelPage();
});

const toAddRoute = (path: string, query: any) => {
  router.push({ path, query });
};

const callBack = (data: any) => {
  switch (data.type || "") {
    case "submit":
      state.searchData = data.data;
      listPersonnelPage(state.searchData);
      break;
    case "rest":
      state.searchData = {};
      state.table.pageIndex = 0;
      state.table.pageSize = 15;
      listPersonnelPage();
      break;
    case "page":
      state.searchData["pageIndex"] = data.data;
      state.searchData["pageSize"] = state.table.pageSize;
      listPersonnelPage(state.searchData);
      break;
    case "pageSize":
      state.searchData["pageIndex"] = state.table.pageIndex;
      state.searchData["pageSize"] = data.data;
      state.table.pageSize = data.data;
      listPersonnelPage(state.searchData);
      break;
    case "edit":
      router.push({
        path: "/personnel/edit-personnel",
        query: {
          id: data.data.id,
        },
      });
      break;
    case "relation":
      break;
    default:
      console.log("callBack", data);
      break;
  }
};

const listPersonnelPage = (params = { pageIndex: 1, pageSize: 15 }) => {
  listPersonnelPageApi(params).then((data: any) => {
    if (data.code === 0) {
      state.data = data.data;
      state.table.total = data.total;
      state.table.pageIndex = data.pageIndex;
      state.table.pageSize = data.pageSize;
    }
  });
};
</script>
